<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    <style>
           *{margin:0;padding:0;}
    	   nav{
    	   	width:100px;
    	   	height:50px;
    	   	border:1px solid #ccc;
    	   	margin:40px auto;
    	   	background-color:#ccc;
    	   	border-radius:5px;
    	   	text-align:center;
    	   	line-height:50px;
    	   	display:block;
    	   }
    	   #btn:hover{
    	   	background-color:#eee;
    	   }
    	   #list{
    	   	display:none;
    	   	list-style-type:none;
    	   	text-align:center;
    	   	line-height:50px;
    	   	border-radius:5px;
    	   	border:1px solid #ccc;
    	   	background-color:#ccc;
    	   }
    	   li:hover{
    	   	background-color:#eee;
    	   }
    </style>
</head>
<body>
	  <nav>
	  	  <div id="btn">dropDown</div>
	  	  <ul id="list">
	  	  	<li id="first" value="123456">第一个</li>
	  	  	<li id="sec">第二个</li>
	  	  	<li id="thr">第三个</li>
	  	  </ul>
	  </nav>
</body>
<script>
	   function $(id){
	   	return document.getElementById(id);
	   }
       $('list').onOff=false;
	   $('btn').onclick = function(){
         if($('list').onOff == false){
            $('list').style.display='block';
            $('list').onOff=true;
         }else{
         	$('list').style.display='none';
            $('list').onOff=false;
         }
	   }
	    $('first').onclick=function(){
	   	$('btn').innerText ='第一个';
	   }
	    $('sec').onclick=function(){
	   	$('btn').innerText ='第二个';
	   }
	    $('thr').onclick=function(){
	   	$('btn').innerText ='第三个';
	   }
</script>
</html>